<!--
 * @FileDescription 悬浮菜单
 * @Author lz
 * @Date 20230526 10:32:10
 * @LastEditors lz
 * @LastEditTime 20230526 10:32:10
-->
<template>
  <div class="wp_Menu" id="wp_Menu">
    <div class="tit_box">
      {{ HomeContent.Default.MenuData.value.Name }}
    </div>
    <div
      class="list_box"
      id="myElement"
      v-if="HomeContent.Default.MenuData.value.Items.length > 0"
    >
      <div class="list_bg"></div>
      <div
        class="list_item"
        @click="kaiqi(item.Id)"
        v-for="(item, index) in HomeContent.Default.MenuData.value.Items"
      >
        <search-outlined v-if="item.Name == '检查'" class="ico_sea" />
        <eye-outlined v-if="item.Name == '查阅'" class="ico_sea" />
        <retweet-outlined v-if="item.Name == '回收'" class="ico_sea" />
        <login-outlined v-if="item.Name == '放回'" class="ico_sea" />
        <edit-outlined v-if="item.Name == '填写'" class="ico_sea" />
        <vertical-align-bottom-outlined v-if="item.Name == '放置'" class="ico_sea" />
        <tool-outlined v-if="item.Name == '请求故障修复'" class="ico_sea" />
        <select-outlined v-if="item.Name == '使用'" class="ico_sea" />
        <PartitionOutlined v-if="item.Name == '端子信息'" class="ico_sea" />
        <ClusterOutlined v-if="item.Name == '电路图'" class="ico_sea" />
        <UserAddOutlined v-if="item.Name == '穿戴'" class="ico_sea" />
        <ApiOutlined v-if="item.Name == '拔出继电器'" class="ico_sea" />
        <LinkOutlined v-if="item.Name == '插入继电器'" class="ico_sea" />
        <LinkOutlined v-if="item.Name == '连接电源'" class="ico_sea" />
        <LinkOutlined v-if="item.Name == '连接负极'" class="ico_sea" />
        <LinkOutlined v-if="item.Name == '连接线束'" class="ico_sea" />
        <LinkOutlined v-if="item.Name == '连接三通'" class="ico_sea" />
        <LinkOutlined v-if="item.Name == '连接'" class="ico_sea" />
        <DisconnectOutlined v-if="item.Name == '断开'" class="ico_sea" />
        <DisconnectOutlined v-if="item.Name == '断开正极'" class="ico_sea" />
        <DisconnectOutlined v-if="item.Name == '断开负极'" class="ico_sea" />
        <DisconnectOutlined v-if="item.Name == '断开线束'" class="ico_sea" />
        <DisconnectOutlined v-if="item.Name == '断开三通'" class="ico_sea" />
        <DisconnectOutlined v-if="item.Name == '断开电源'" class="ico_sea" />
        <link rel="stylesheet" href="iconfont/favicon.ico" type="" />
        <div class="open" v-if="item.Name == '打开'"></div>
        <div class="close" v-if="item.Name == '关闭'"></div>
        <div class="replace" v-if="item.Name == '更换'"></div>
        <div class="discard" v-if="item.Name == '丢弃'"></div>
        <div class="electrify" v-if="item.Name == '请求上电'"></div>
        <div class="refuel" v-if="item.Name == '加注'"></div>
        <div class="extract" v-if="item.Name == '抽取'"></div>
        <div class="observe" v-if="item.Name == '观察'"></div>
        <div class="concatenate" v-if="item.Name == '连接正极'"></div>
        <div class="pullOut" v-if="item.Name == '拔出保险丝'"></div>
        <div class="interposition" v-if="item.Name == '插入保险丝'"></div>

        <span class="item_name">{{ item.Name }}</span>
        <right-outlined class="ico_rig" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  reactive,
  ref,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onUnmounted,
  StyleValue,
  watch,
} from "vue";
import {
  DisconnectOutlined,
  ClusterOutlined,
  UserAddOutlined,
  LinkOutlined,
  SelectOutlined,
  PartitionOutlined,
  SearchOutlined,
  ApiOutlined,
  EyeOutlined,
  RightOutlined,
  RetweetOutlined,
  LoginOutlined,
  EditOutlined,
  VerticalAlignBottomOutlined,
  ToolOutlined,
} from "@ant-design/icons-vue";
import module from "../WorkOrder/index.vue";
import HomeContent from "../HomeContent";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import MessageCode from "../MessageCode";
const state = reactive({});
const X = ref("0%");
const Y = ref("0%");
let newXY: any = ref();

async function kaiqi(Id: number) {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisDisplayUIMenuRequest(false)
  );
  //菜单操作消息
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DISASSEMBLY_OBJECT_MENU_OPERATE,
      `${Id}`
    )
  );
  HomeContent.Default.MenuData.value = {};
}
//监听
watch(
  () => HomeContent.Default.MenuData.value,
  (newVal, oldVal) => {
    if (newVal != oldVal) {
      // console.log('更新更新更新');
      // X.value = `${HomeContent.Default.MenuData.value.X}px`
      // Y.value = `${window.screen.height - HomeContent.Default.MenuData.value.Y}px`
    }
  }
);

onMounted(() => {
  if (document.getElementById("myElement")) {
    // 标签+列表
    let element: any = document.getElementById("myElement");
    let height = element.offsetHeight;
    console.log("heightttt", height);
    newXY.value = JSON.parse(window.sessionStorage.getItem("Cursor")!);
    X.value = newXY.value.X * window.screen.width * 0.01 + 10 + "px";
    Y.value = newXY.value.Y * window.screen.height * 0.01 + 10 + "px";
    //  宽高都超过时
    if (
      height + newXY.value.Y * window.screen.height * 0.01 + 80 > window.screen.height &&
      300 + newXY.value.X * window.screen.width * 0.01 + 10 > window.screen.width
    ) {
      X.value = newXY.value.X * window.screen.width * 0.01 - 300 + 10 + "px";
      Y.value = newXY.value.Y * window.screen.height * 0.01 - (height + 72) + 10 + "px";
    } else {
      // 分情况判断
      // 高超过时
      if (
        height + newXY.value.Y * window.screen.height * 0.01 + 80 >
        window.screen.height
      ) {
        X.value = newXY.value.X * window.screen.width * 0.01 + 10 + "px";
        Y.value = newXY.value.Y * window.screen.height * 0.01 - (height + 72) + 10 + "px";
        // 宽超过时
      } else if (
        300 + newXY.value.X * window.screen.width * 0.01 + 10 >
        window.screen.width
      ) {
        X.value = newXY.value.X * window.screen.width * 0.01 - 300 + 10 + "px";
        Y.value = newXY.value.Y * window.screen.height * 0.01 + 10 + "px";
      }
    }
    // if (newXY.value.X < 50.00 && newXY.value.Y < 50.00) {
    //     X.value = (newXY.value.X * window.screen.width * 0.01) + 10 + 'px'
    //     Y.value = (newXY.value.Y * window.screen.height * 0.01) + 10 + 'px'
    // } else if (newXY.value.X > 100.00 && newXY.value.Y < 50.00) {
    //     X.value = (newXY.value.X * window.screen.width * 0.01 - 300) + 10 + 'px'
    //     Y.value = (newXY.value.Y * window.screen.height * 0.01) + 10 + 'px'
    // } else if (newXY.value.X > 100.00 && newXY.value.Y > 100.00) {
    //     X.value = (newXY.value.X * window.screen.width * 0.01 - 300) + 10 + 'px'
    //     Y.value = (newXY.value.Y * window.screen.height * 0.01 - (height + 72)) + 10 + 'px'
    // } else {
    //     X.value = (newXY.value.X * window.screen.width * 0.01) + 10 + 'px'
    //     Y.value = (newXY.value.Y * window.screen.height * 0.01 - (height + 72)) + 10 + 'px'
    // }
    console.log("XYXXXXXXXYYYYYY", newXY.value, X.value, Y.value);
  } else {
    // 单独只有标签
    let element: any = document.getElementById("wp_Menu");
    let height = element.offsetHeight;
    console.log("heightttt", height);
    newXY.value = JSON.parse(window.sessionStorage.getItem("Cursor")!);
    X.value = newXY.value.X * window.screen.width * 0.01 + 10 + "px";
    Y.value = newXY.value.Y * window.screen.height * 0.01 + 10 + "px";
    //  宽高都超过时
    if (
      height + 50 + newXY.value.Y * window.screen.height * 0.01 > window.screen.height &&
      300 + newXY.value.X * window.screen.width * 0.01 + 10 > window.screen.width
    ) {
      X.value = newXY.value.X * window.screen.width * 0.01 - 300 + 10 + "px";
      Y.value = newXY.value.Y * window.screen.height * 0.01 - height + 20 + "px";
    } else {
      // 分情况判断
      // 高超过时
      if (
        height + 50 + +(newXY.value.Y * window.screen.height * 0.01) >
        window.screen.height
      ) {
        X.value = newXY.value.X * window.screen.width * 0.01 + 10 + "px";
        Y.value = newXY.value.Y * window.screen.height * 0.01 - height + 20 + "px";
        // 宽超过时
      } else if (
        300 + newXY.value.X * window.screen.width * 0.01 + 10 >
        window.screen.width
      ) {
        X.value = newXY.value.X * window.screen.width * 0.01 - 300 + 10 + "px";
        Y.value = newXY.value.Y * window.screen.height * 0.01 + 10 + "px";
      }
    }
  }
});
</script>

<style scoped>
.wp_Menu {
  position: absolute;
  left: v-bind(X);
  top: v-bind(Y);
  width: 300px;
}

.tit_box {
  width: 212px;
  height: 52px;
  line-height: 52px;
  font-size: 20px;
  color: #9bfb4e;
  font-weight: 600;
  padding-left: 16px;
  background: linear-gradient(
    90deg,
    #06080d 0%,
    rgba(6, 8, 13, 0.75) 58%,
    rgba(6, 8, 13, 0) 100%
  );
  border-radius: 16px 16px 16px 16px;
}

.list_box {
  position: absolute;
  margin-top: 8px;
  padding: 16px 0 8px 16px;
}

.list_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 204px;
  height: 100%;
  background: linear-gradient(
    90deg,
    #9bfb4e 0%,
    rgba(155, 251, 78, 0.75) 58%,
    rgba(155, 251, 78, 0) 100%
  );
  border-radius: 16px 16px 16px 16px;
  opacity: 0.3;
  z-index: -1;
}

.list_item {
  width: 280px;
  height: 52px;
  background: linear-gradient(
    90deg,
    #06080d 0%,
    rgba(6, 8, 13, 0.75) 58%,
    rgba(6, 8, 13, 0) 100%
  );
  border-radius: 4px 4px 4px 4px;
  line-height: 50px;
  margin-bottom: 8px;
}

.ico_sea {
  font-size: 20px;
  color: #9bfb4e;
  padding-left: 16px;
}

.open {
  width: 25px;
  height: 27px;
  display: inline-block;
  margin-bottom: -6px;
  margin-left: 12px;
  background-image: url("/public/images/ic_打开.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list_item:hover > .open {
  background-image: url("/public/images/ic_打开_select.png");
  background-repeat: no-repeat;
}
.close {
  width: 25px;
  height: 27px;
  display: inline-block;
  margin-bottom: -6px;
  margin-left: 12px;
  background-image: url("/public/images/ic_关闭.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list_item:hover > .close {
  background-image: url("/public/images/ic_关闭_select.png");
  background-repeat: no-repeat;
}
.replace {
  width: 25px;
  height: 27px;
  display: inline-block;
  margin-bottom: -6px;
  margin-left: 12px;
  background-image: url("/public/images/ic_更换.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list_item:hover > .replace {
  background-image: url("/public/images/ic_更换_select.png");
  background-repeat: no-repeat;
}
.discard {
  width: 25px;
  height: 27px;
  display: inline-block;
  margin-bottom: -6px;
  margin-left: 12px;
  background-image: url("/public/images/ic_丢弃.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list_item:hover > .discard {
  background-image: url("/public/images/ic_丢弃_select.png");
  background-repeat: no-repeat;
}
.electrify {
  width: 25px;
  height: 27px;
  display: inline-block;
  margin-bottom: -6px;
  margin-left: 12px;
  background-image: url("/public/images/ic_请求上电.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list_item:hover > .electrify {
  background-image: url("/public/images/ic_请求上电_select.png");
  background-repeat: no-repeat;
}
.refuel {
  width: 25px;
  height: 27px;
  display: inline-block;
  margin-bottom: -6px;
  margin-left: 12px;
  background-image: url("/public/images/ic_加注.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list_item:hover > .refuel {
  background-image: url("/public/images/ic_加注_select.png");
  background-repeat: no-repeat;
}
.extract {
  width: 25px;
  height: 27px;
  display: inline-block;
  margin-bottom: -6px;
  margin-left: 12px;
  background-image: url("/public/images/ic_抽取.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list_item:hover > .extract {
  background-image: url("/public/images/ic_抽取_select.png");
  background-repeat: no-repeat;
}
.observe {
  width: 25px;
  height: 27px;
  display: inline-block;
  margin-bottom: -6px;
  margin-left: 12px;
  background-image: url("/public/images/ic_观察.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list_item:hover > .observe {
  background-image: url("/public/images/ic_观察_select.png");
  background-repeat: no-repeat;
}
.concatenate {
  width: 25px;
  height: 27px;
  display: inline-block;
  margin-bottom: -6px;
  margin-left: 12px;
  background-image: url("/public/images/ic_连接正极.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list_item:hover > .concatenate {
  background-image: url("/public/images/ic_连接正极_select.png");
  background-repeat: no-repeat;
}
.pullOut {
  width: 25px;
  height: 27px;
  display: inline-block;
  margin-bottom: -6px;
  margin-left: 12px;
  background-image: url("/public/images/ic_拔出保险丝.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list_item:hover > .pullOut {
  background-image: url("/public/images/ic_拔出保险丝_select.png");
  background-repeat: no-repeat;
}
.interposition {
  width: 25px;
  height: 27px;
  display: inline-block;
  margin-bottom: -6px;
  margin-left: 12px;
  background-image: url("/public/images/ic_插入保险丝.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list_item:hover > .interposition {
  background-image: url("/public/images/ic_插入保险丝_select.png");
  background-repeat: no-repeat;
}

.item_name {
  font-size: 20px;
  padding-left: 15px;
  padding-right: 36px;
}

.ico_rig {
  font-size: 16px;
}

.list_item:hover {
  background: linear-gradient(
    90deg,
    #9bfb4e 0%,
    rgba(155, 251, 78, 0.75) 58%,
    rgba(155, 251, 78, 0) 100%
  );
}

.list_item:hover > .item_name {
  color: #000;
}

.list_item:hover > .ico_sea {
  color: #000;
}

.list_item:hover > .ico_rig {
  color: #000;
}

.ico {
  width: 24px;
  margin-left: 14px;
  margin-top: -8px;
}
</style>
